<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import WeatherList from "@/views/all/bench/task/weather/components/WeatherList/index.vue";
import dayjs from "dayjs";
import { queryWeatherNow, queryWeatherDaily } from "@/api/bench";
const weatherData: any = ref({});
const warningData: any = ref([]);
const tab = defineModel("tab");
const day = ref();
const dateTime = ref();
const router = useRouter();
const getWeatherNow = async () => {
  const data = await queryWeatherNow(dateTime.value);
  weatherData.value = data?.now || {};
  warningData.value = data?.warning || {};
};

const { fxDate } = useRoute().query;

const viewSpcDetail = () => {
  router.push({
    path: "/all/bench/task/weather",
    query: {
      page: "/machine/operation/environmentTestManage/visualManage"
    }
  });
};

onMounted(() => {
  if (fxDate) {
    day.value = dayjs(fxDate).format("YYYY年MM月DD日");
    dateTime.value = dayjs(fxDate).format("YYYY-MM-DD");
  } else {
    day.value = dayjs().format("YYYY年MM月DD日");
    dateTime.value = dayjs().format("YYYY-MM-DD");
  }
  getWeatherNow();
});
const isToday = computed(() => {
  return dateTime.value === dayjs().format("YYYY-MM-DD");
});
const getTemperature = (temp?: string) => {
  return temp ? `${temp}℃` : "-";
};
</script>
<template>
  <div class="weather-box">
    <div class="flex-row">
      <div class="flex flex-center">
        <div v-if="isToday" class="temp">{{ weatherData.temp }}℃</div>
        <div class="temperature">
          <span class="start">{{ getTemperature(weatherData.tempMin) }}</span> ~
          <span class="end">{{ getTemperature(weatherData.tempMax) }}</span>
        </div>
        <div class="weather-icon-box ml-[20px]">
          <i :class="`qi-${weatherData.icon}`" />
          <span class="ml-[8px] icon-text">{{ weatherData.text }}</span>
        </div>
        <div class="warning ml-[11px]">
          <px-tooltip v-for="item in warningData" :key="item.id" :content="item.text">
            <i :class="`qi-${item.type} ${item.severityColor} ml-[16px]`" />
          </px-tooltip>
        </div>
      </div>
      <div class="right_btn">
        <px-button type="primary" text link @click="viewSpcDetail()">
          查看更多
          <px-icon><ArrowRight /></px-icon>
        </px-button>
      </div>
    </div>
    <div class="flex-row">
      <px-scrollbar class="list-scroll">
        <WeatherList :weatherData="weatherData" />
      </px-scrollbar>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.icon {
  font-size: 24px;
  color: rgb(59 130 246 / 100%);
  text-align: center;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  align-items: center;
}

.temp {
  margin-right: 27px;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  color: #3b82f6;
}

.weather-icon-box {
  font-size: 20px;
}

.icon-text {
  font-size: 14px;
}

.weather-box {
  flex: 1;
}

.warning {
  font-size: 20px;
}

.White {
  color: #eee;
}

.Blue {
  color: #4089f7;
}

.Green {
  color: #30d158;
}

.Yellow {
  color: yellow;
}

.Orange {
  color: #f59e0b;
}

.Red {
  color: #ef4444;
}

.Black {
  color: #333;
}

.list-scroll {
  flex-grow: 1;
  width: 20%;
}
</style>
